<template>
  <body>
  <div class="box">
    <h2 style="color: rgb(249,231,172);">管理员登录</h2>
    <div class="input-box">
      <label>账号</label>
      <input type="text" v-model="form.username" placeholder="请输入用户名">
    </div>
    <div class="input-box">
      <label>密码</label>
      <input type="password" v-model="form.password" placeholder="请输入密码" @keydown.enter=login>
    </div>
    <div class="btn-box">
      <div>
        <button @click="goBack()">返回</button>
        <button @click="login()">登录</button>
      </div>
    </div>
  </div>
  </body>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "LoginView",
  created() {
    document.title = '管理员登录';
  },
  data() {
    return {
      form: {}
    }
  },
  methods: {
    login() {
      request.post('/user/manageLogin', this.form).then(res => {
        if (res.code === '0') {
          this.$message({
            type: 'success',
            message: "登录成功",
          });
          // 缓存用户信息
          sessionStorage.setItem("user", JSON.stringify(res.data));
          // 跳转主页，检测用户的角色是否为管理员，如果是admin才跳转管理页面
          this.$router.push('/charts');
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          })
        }
      })
    },
    goBack() {
      window.history.back();
    }
  }
}
</script>
<style src="../assets/css/login.css" scoped>
</style>
